<template>
    <div class="index clearafter">
        <module-head></module-head>
        <div class="content cbafter">
            <div class="w220 fl">
                <menu-list></menu-list>
            </div>
            <div class="w980 fr">
                <div class="h1_tit">
                    <h1>排班审核列表</h1>
                </div>
                <div class="bs-example-modal-lg">
                    <div class="modal-dialog modal-lg">
                        <div class="modal-content">
                            <div class="modal-body">
                                <div class="paientinfo testlist">
                                    <table>
                                        <tr>
                                            <th colspan="6">
                                                <label class="radio-inline">
                                                      <input type="radio" v-model="param.flag" value="1"> 待审核
                                                </label>
                                                <label class="radio-inline">
                                                    <input type="radio" v-model="param.flag" value="0"> 全部
                                                     
                                                </label>
                                                <div class="search">
                                                    请选择时间段：
                                                    <input type="text" id="start" v-model="param.startDate"> -
                                                    <input type="text" id="end" v-model="param.endDate">
                                                    <button class="default blue w80" id="searchselftest" @click="querydoctorplan">搜索</button>
                                                </div>
                                            </th>
                                        </tr>
                                        <tr v-for="item in doctorplanlist">
                                            <td><img :src="item.imgurl"></td>
                                            <td>
                                                <p><span class="name">{{item.name}}</span><span class="grey">{{item.levelText}}</span></p>
                                                <p>
                                                    <span class="orgname">{{item.orgName}}</span>|<span>{{item.deptName}}</span>
                                                </p>
                                            </td>
                                            <td>
                                                <p class="grey">{{item.planBeginDate}} 至 {{item.planEndDate}}</p>
                                            </td>
                                            <td>
                                                <p class="grey">{{item.submitTime.substring(0,16)}}</p>
                                            </td>
                                            <td>
                                                <p :class="{red:item.verifyState=='2',green:item.verifyState=='1',orange:item.verifyState=='0'}">{{item.verifyStateText}}</p>
                                            </td>
                                            <td>
                                                <span class="glyphicon glyphicon-eye-open grey" v-if="item.verifyState=='2'||item.verifyState=='1'"@click="getDoctorPlan(item)"></span>
                                                <span class="glyphicon glyphicon-list-alt grey" v-if="item.verifyState=='0'" @click="getDoctorPlan(item)"></span>
                                            </td>
                                        </tr>
                                        <tr>
                                            <td colspan="6">
                                                <div class="pull-left">
                                                    <button class="btn btn-default" @click="refresh">刷新</button>
                                                </div>
                                                <div class="pull-right">
                                                    <boot-page v-ref:page :async="true" :lens="lenArr" :page-len="pageLen" :headersparam="headersparam" :param="param"></boot-page>
                                                </div>
                                            </td>
                                        </tr>
                                    </table>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <doctor-plan-edit v-ref:doctorplanedit :optobj="optobj"></doctor-plan-edit>
    </div>
</template>
<script>
import 'assets/lib/bootstrap-3.3.2/css/bootstrap.min.css'
import 'assets/lib/bootstrap-3.3.2/js/bootstrap.min.js'
import 'assets/lib/laydate/laydate.js'
import 'assets/lib/laydate/need/laydate.css'
import 'assets/lib/laydate/skins/danlan/laydate.css'
import 'assets/reset.css'
import Public from 'assets/public.js'
import bootPage from 'components/BootPage.vue'
import moduleHead from 'components/module-head'
import doctorPlanEdit from 'components/doctor-plan-edit'
import menuList from 'components/menu-list'
module.exports = {
    data() {
            return {
                lenArr: [10, 20, 50], // 每页显示长度设置
                pageLen: 5, // 可显示的分页数
                headersparam: {
                    "X-Service-Id": "coms.doctorPlanService",
                    "X-Service-Method": "queryDoctorPlanVerify",
                },
                param: {
                  
                    endDate: Public.formatDate(),
                    startDate: this.getpreWeekmonday(),
                    flag: "1"
                }, // 传递参数,
                doctorplanlist: [],
                optobj: {}, //传给编辑组件的数据，用于头部渲染
            }
        },
        components: {
            bootPage, moduleHead, menuList, doctorPlanEdit
        },
        ready() {
            var that = this;
            // this.param.endDate = this.getnextWeekmonday();
            // this.param.startDate = this.getnextWeekmonday("monday");
            // 日历插件
            laydate({
                elem: '#start',
                fixed: true,
                // min: laydate.now(),
                // min: laydate.now(-30),
                istoday: false,
                choose: function(datas) { //选择日期完毕的回调  
                    that.param.startDate = datas
                }
            });
            // 日历插件
            laydate({
                elem: '#end',
                fixed: true,
                // min: laydate.now(),
                // min: laydate.now(-30),
                istoday: false,
                choose: function(datas) { //选择日期完毕的回调  
                    that.param.endDate = datas
                }
            });

        },
        methods: {
            //根据起始时间和结束时间搜索健康列表
            querydoctorplan() {
                    this.refresh();
                },
                refresh() {
                    this.$refs.page.refresh()
                },
                // 根据日期的方法获取当前日期的上周的周一
                getpreWeekmonday() {
                    var now = new Date();
                    var day = now.getDay();
                    switch (day) {
                        case 0:
                            day = 6;
                            break;
                        case 1:
                            day = 7;
                            break;
                        case 2:
                            day = 8;
                            break;
                        case 3:
                            day = 9;
                            break;
                        case 4:
                            day = 10;
                            break;
                        case 5:
                            day = 11;
                            break;
                        case 6:
                            day = 12;
                            break;

                    }
                    now.setDate(now.getDate() - day);
                    return Public.formatDate(now);
                },
                // 点击编辑排班
                getDoctorPlan(item) {
                    this.optobj = item;
                    this.$refs.doctorplanedit.getDoctorPlan(item);
                },

        },
        events: {
            // 分页组件传回的表格数据
            'data' (data) {
                $.each(data, function(index, el) {
                    el.imgurl = Public.IMGVIEW_URL() + el.avatarFileId;
                    el.planBeginDate = el.planBeginDate.substring(0, 10);
                    el.planEndDate = el.planEndDate.substring(0, 10);
                });
                this.doctorplanlist = data;

            },
            'saveverify' () {
                this.refresh();
            }
        },
}
</script>
<style scoped>
.modal-dialog {
    margin: 0;
}

.paientinfo {
    padding-bottom: 20px;
    border-bottom: 1px dashed #EFEFEF;
    width: 90%;
    margin: 20px auto;
}

.paientinfo table {
    width: 100%;
}

.paientinfo table td p span {
    display: inline-block;
    margin-left: 10px;
    height: 20px;
}

.paientinfo table td .name {
    font-weight: 700;
    color: #1dc499
}

.paientinfo table td .orgname {
    padding-right: 10px
}

.paientinfo table td .grey {
    color: #999;
}

.testlist {
    width: 90%;
    border-bottom: none;
    min-height: 500px;
    background: #fff;
}

.testlist tr {
    border-bottom: 1px dashed #EFEFEF;
    padding: 15px 0
}

.testlist tr.noborder {
    border-bottom: none
}

.testlist tr th {
    padding: 0 0 20px;
    font-weight: normal;
}

.testlist tr td {
    padding: 15px 0
}
.testlist tr td span{
    display: inline-block;
    cursor: pointer;
}
.testlist input {
    border: 1px solid #EFEFEF;
    margin: 0 20px 0 10px;
    padding: 3px 10px 3px 10px
}

.testlist input[type=radio] {
    margin-top: 3px
}

.testlist img {
    height: 63px;
    width: auto
}

#searchselftest {
    display: inline-block;
}

.w80 {
    width: 80px
}

.search {
    padding-left: 10px;
    display: inline-block;
}

.testlist .radio-inline {
    color: #1dc499;
    font-size: 14px;
}

p.red {
    color: #ef5037;
}

p.orange {
    color: #fdab36;
}

p.green {
    color: #1dc499;
}
</style>
